<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>函数表达式(function expression)</title>
  <!-- 
    函数表达式(function expression)是 JavaScript 中定义函数的一种方式，它与函数声明不同。
    1. 定义
    - 函数表达式：将一个函数赋值给一个变量。函数表达式可以是命名的或匿名的。

    2. 基本语法
      const functionName = function(parameters) {
        // 函数体
        return value;
      };

      - 命名函数表达式：可以为函数提供名称，便于调试。
      const namedFunction = function myFunction(parameters) {
        // 函数体
      };
      - 匿名函数表达式：没有名称的函数，通常用于一次性调用。
      const anonymousFunction = function(parameters) {
        // 函数体
      };

    3. 使用示例
      const add = function(a, b) {
        return a + b;
      };

      console.log(add(2, 3)); // 输出: 5

      - 立即调用的函数表达式 (IIFE)：
      (function() {
          console.log("这是一个立即调用的函数表达式");
      })();

    4. 特点
      - 可以作为值：函数表达式可以赋值给变量、传递给其他函数或作为返回值。
      const multiply = function(a, b) {
        return a * b;
      };

      const result = multiply(4, 5); // result = 20

      - 可以作为参数：函数表达式可以作为其他函数的参数传递。
      function executeFunction(fn) {
        fn();
      }

      executeFunction(function() {
        console.log("函数被执行了");
      });

    5. 优缺点
      - 优点：
        - 允许将函数作为第一类对象处理。
        - 可以创建闭包，保持对外部变量的引用。

      - 缺点：
        - 函数表达式在声明之前不可用（提升）。

     6. 注意事项
      - 使用函数表达式时要注意作用域和上下文，尤其是在回调函数和事件处理程序中。
      - 推荐使用箭头函数（Arrow Function）来简化语法，尤其是在需要保持  `this`  上下文时。

    总结
    函数表达式是 JavaScript 中定义和使用函数的重要方式，提供了灵活性和强大的功能。
   -->
</head>
<body>

  <script>
    
    // 1. 函数的声明
    function add(a, b) {
      return a + b;
    }
    console.log("1. 函数的声明", add(2, 3)); // 输出: 5

    // 2. 函数表达式
    const anonymousFunction = function(a, b) {
      return a + b;
    };
    console.log("2. 函数表达式", anonymousFunction(2, 3)); // 输出: 5

    // 3. 立即调用的函数表达式 (IIFE)
    (function() {
      console.log("这是一个立即调用的函数表达式");
    })();

    // 4. 回调函数
    function doSomething(callback) {
      console.log("4. 回调函数 Doing something...");
      callback();
    }

    doSomething(function() {
      console.log("4. 回调函数 Callback function executed");
    });

    // 5. 闭包
    function createCounter() {
      let count = 0;
      return function() {
        return count++;
      };
    }

    const counter = createCounter();
    console.log("5. 闭包", counter()); // 0
    console.log("5. 闭包",counter()); // 1
    console.log("5. 闭包",counter()); // 2

    // 6. 箭头函数
    const arrowFunction = (a, b) => a + b;
    console.log("6. 箭头函数", arrowFunction(3, 4)); // 7

    // 7. 递归函数
    function factorial(n) {
      if (n === 0) {
        return 1;
      }
      return n * factorial(n - 1);
    }

    console.log("7. 递归函数", factorial(5)); // 120


    
  </script>
  
</body>
</html>